<template>
  <div class='Timeoutnotification' id='Timeoutnotification'>
    <div class='title'>
      <h6 v-once>{{$t('monitor.monitorNotifyH6')}}</h6>
        <p v-once class="tip">
          {{$t('monitor.monitorNotifyContent')}}
        </p>
    </div>
    <div class='state-add'>
      <div class="state-title">座席状态设置</div>
      <div class='state-add-box' v-for="(curItem, curIndex) in selectdArr">
        <el-select v-model="curItem.key" placeholder="请选择" style='margin-right:10px' @change="((val)=>{selectChange(val, curItem)})">
          <el-option
            v-for="(item, index) in selectAll"
            :key="index"
            :label="item.label"
            v-show="!selectObj[item.key]"
            :value="item.key">
          </el-option>
          <el-option disabled v-if="!isShowSelect">
             无数据
          </el-option>
        </el-select>
        <el-input placeholder="大于" disabled style='width:130px; margin: 0 10px'></el-input>
        <el-input size="mini" style='width:130px;margin: 0 10px' :min='0' type="number" v-model="curItem.value" @blur = 'numberInput(curIndex, "selectdArr")'>
          <template slot="append">{{$t('public.minutes2')}}</template>
        </el-input>
        <span class="btn" @click='removeClick(curIndex, curItem.oldKey)'><i class="iconfont icon-zuixiaohua1"></i></span>
      </div>
      <div class="addBox" v-show='isShowSelect' @click='addClick'><span class='addBtn'><i class="iconfont icon-guanbi1"></i></span>添加条件</div>
    </div>
    <div class="state-config">
       <div class="state-title">通话状态设置<questionToolTip :tipContent="'此功能需要进行单独升级，如需使用请联系客服进行开通。'"></questionToolTip></div>
       <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="通话前" name="first">
          <div class='state-box' v-for="(curItem, curIndex) in RingNotDealSelected">
              <div class="state-add-box">
                <el-select v-model="curItem.key" placeholder="请选择" style='margin-right:10px' @change="((val)=>{stateSelectChange(val, curItem)})">
                  <el-option
                    v-for="(item, index) in RingNotDealAll"
                    :key="index"
                    :label="item.label"
                    v-show="!RingNotDealAllObj[item.key]"
                    :value="item.key">
                  </el-option>
                  <el-option disabled v-if="!isShowRingNotDealAdd">
                    无数据
                  </el-option>
                </el-select>
                <el-input placeholder="大于" disabled style='width:130px; margin: 0 10px'></el-input>
                <el-input size="mini" style='width:130px;margin: 0 10px' :min='0' type="number" v-model="curItem.value" @blur = 'numberInput(curIndex, "RingNotDealSelected")'>
                  <template slot="append"><span v-if="curItem.key === 'TimeLength'">{{$t('public.seconds')}}</span><span v-else>{{$t('public.second')}}</span></template>
                </el-input>
                <span class="btn" @click='stateRemoveClick(curIndex, curItem.oldKey)'><i class="iconfont icon-zuixiaohua1"></i></span>
              </div>
              <div class='conditionSelect' v-if="curIndex === 0 && !isShowRingNotDealAdd">
                <el-select v-model="conditionValue" placeholder="请选择">
                  <el-option
                    v-for="item in condition"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
          </div>
          <div class="addBox" v-show="isShowRingNotDealAdd" @click='callStateaddClick'><span class='addBtn'><i class="iconfont icon-guanbi1"></i></span>添加条件</div>
        </el-tab-pane>
        <el-tab-pane label="通话中" name="second">
           <div class='state-box' v-for="(curItem, curIndex) in callingSelected">
              <div class="state-add-box">
                <el-select v-model="curItem.key" placeholder="请选择" style='margin-right:10px' @change="((val)=>{callingSelectChange(val, curItem)})">
                  <el-option
                    v-for="(item, index) in callingAll"
                    :key="index"
                    :label="item.label"
                    v-show="!callingAllObj[item.key]"
                    :value="item.key">
                  </el-option>
                  <el-option disabled>
                    无数据
                  </el-option>
                </el-select>
                <el-input placeholder="大于" disabled style='width:130px; margin: 0 10px'></el-input>
                <el-input size="mini" style='width:130px;margin: 0 10px' :min='0' type="number" v-model="curItem.value" @blur='numberInput(curIndex, "callingSelected")'>
                  <template slot="append">{{$t('public.minutes2')}}</template>
                </el-input>
                <span class="btn" @click='callingRemoveClick(curIndex, curItem.oldKey)'><i class="iconfont icon-zuixiaohua1"></i></span>
              </div>
          </div>
          <div class="addBox" v-show="isShowCallingAdd" @click='callingaddClick'><span class='addBtn'><i class="iconfont icon-guanbi1"></i></span>添加条件</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { deepClone } from '@/utils/m7Utils'
import questionToolTip from '@/components/ui-modules/questionToolTip/QuestionToolTip.vue'
  export default {
    name: 'Timeoutnotification',
    data () {
      return {
        stateData: deepClone(this.data),
        selectdArr: [{key: "", label: "", oldKey: "", value: 1}],
        selectAll: [],
        selectObj: {},
        // 通话状态设置
        RingNotDealAll: [{label: '呼入振铃时长', key: 'TimeLength', value: 0, oldKey: 'TimeLength'}, {label: '呼入振铃未接听', key: 'Times', value: 0, oldKey: 'Times'}],
        RingNotDealAllObj: {
          TimeLength: false,
          Times: false
        },
        RingNotDealSelected: [],
        // 条件选择
        conditionValue: 'or',
        condition: [{label: '或', value: 'or'}, {label: '且', value: 'and'}],
        // 通话中
        callingAll: [{label: '通话时长', key: 'TimeLength', value: 0, oldKey: 'TimeLength'}],
        callingAllObj: {
          TimeLength: false
        },
        callingSelected: [],
        activeName: 'first' 
      }
    },
    props: {
      data: {type: Object, default: function () { return {} }},
      isShow: {type: Boolean, default: false}
    },
    methods: {
      selectChange (value, curItem) {
        let key = curItem.oldKey
        this.$set(this.selectObj, key, false)
        this.$set(this.selectObj, value, true)
        curItem.oldKey = value
        curItem.value = 0
      },
      selectClass () {
        this.initData()
        let dataObj = deepClone(this.data)
        let selectAll = []
        let selectdArr = []
        let selectObj = {}
        Object.keys(dataObj.form).forEach((key)=>{
          if (dataObj.form[key] > 0) {
            selectdArr.push({label: dataObj.data[key], key: key, value: dataObj.form[key], oldKey: key})
            selectObj[key] = true
          } else {
            selectObj[key] = false
          }
          selectAll.push(({label: dataObj.data[key], key: key, value: dataObj.form[key], oldKey: key}))
        })
        this.$set(this, 'selectObj', selectObj)
        this.$set(this, 'selectdArr', selectdArr)
        this.$set(this, 'selectAll', selectAll)
        dataObj.callStateData.forEach((item)=>{
          if (item.EventType === "RingNotDeal") {
            this.conditionValue = item.OperationType
            let arr = []
            if (item.Times > 0) {
              this.RingNotDealAllObj.Times = true
              arr.push({key: 'Times', oldKey: 'Times', value: item.Times})
            } 
            if (item.TimeLength > 0) {
              this.RingNotDealAllObj.TimeLength = true
              arr.push({key: 'TimeLength', oldKey: 'TimeLength', value: item.TimeLength})
            }
            this.$set(this, 'RingNotDealSelected', arr)
          } else if (item.EventType === "Calling") {
            let arr = []
            if (item.TimeLength > 0) {
              this.callingAllObj.TimeLength = true
              arr.push({key: 'TimeLength', oldKey: 'TimeLength', value: item.TimeLength})
            }
            this.$set(this, 'callingSelected', arr)
          }
        })
      },
      initData () {
        this.RingNotDealAllObj = {
          TimeLength: false,
          Times: false
        }
        this.callingAllObj = {
          TimeLength: false
        }
      },
      addClick () {
        let selectKey = ''
        let obj = {}
        Object.keys(this.selectObj).forEach((key)=>{
          if (!this.selectObj[key]) {
            selectKey = key
          }
        })
        if (selectKey) {
          this.selectAll.forEach((item)=>{
            if (item.key === selectKey) {
              obj = deepClone(item)
            }
          })
          this.selectObj[selectKey] = true
          this.selectdArr.push(obj)
        }
      },
      removeClick (index, key) {
        this.selectdArr.splice(index, 1)
        this.selectObj[key] = false
      },
      callStateaddClick () {
        let selectKey = ''
        let obj = {}
        Object.keys(this.RingNotDealAllObj).forEach((key)=>{
          if (!this.RingNotDealAllObj[key]) {
            selectKey = key
          }
        })
        if (selectKey) {
          this.RingNotDealAll.forEach((item)=>{
            if (item.key === selectKey) {
              obj = deepClone(item)
            }
          })
          this.RingNotDealAllObj[selectKey] = true
          this.RingNotDealSelected.push(obj)
        }
      },
      stateRemoveClick (index, key) {
        this.RingNotDealSelected.splice(index, 1)
        this.RingNotDealAllObj[key] = false
      },
      stateSelectChange (value, curItem) {
        let key = curItem.oldKey
        this.$set(this.RingNotDealAllObj, key, false)
        this.$set(this.RingNotDealAllObj, value, true)
        curItem.oldKey = value
        curItem.value = 0
      },
      callingaddClick () {
        let selectKey = ''
        let obj = {}
        Object.keys(this.callingAllObj).forEach((key)=>{
          if (!this.callingAllObj[key]) {
            selectKey = key
          }
        })
        if (selectKey) {
          this.callingAll.forEach((item)=>{
            if (item.key === selectKey) {
              obj = deepClone(item)
            }
          })
          this.callingAllObj[selectKey] = true
          this.callingSelected.push(obj)
        }
      },
      callingSelectChange (value, curItem) {
        let key = curItem.oldKey
        this.$set(this.callingAllObj, key, false)
        this.$set(this.callingAllObj, value, true)
        curItem.oldKey = value
        curItem.value = 0
      },
      callingRemoveClick (index, key) {
        this.callingSelected.splice(index, 1)
        this.callingAllObj[key] = false
      },
      numberInput (index, type) {
        let num = parseInt(this[type][index].value)
        console.log(num)
        if (num < 0) {
          this[type][index].value = 0
        } else if (num > 1440) {
          this[type][index].value = 1440
        }
      }
    },
    watch: {
      isShow: {
        handler (show) {
          if (show) {
            this.selectClass()
          }
        },
        immediate: true
      }
    },
    computed: {
      isShowSelect () {
        return Object.keys(this.selectObj).length !== this.selectdArr.length
      },
      isShowRingNotDealAdd () {
        return Object.keys(this.RingNotDealAllObj).length !== this.RingNotDealSelected.length
      },
      isShowCallingAdd () {
        return Object.keys(this.callingAllObj).length !== this.callingSelected.length
      }
    },
    components: {
      questionToolTip
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl';
  .state-add
    padding-bottom 15px
    border-bottom 1px solid #E0E0E0
  .state-title
    font-weight bold
    margin 5px 0 5px
  .tip
    color #5A74A9
  .conditionSelect
    margin-bottom 10px
  .state-add-box
    display flex
    flex-direction row
    align-items center
    margin-bottom 10px
    .btn
      background #FF686A
      border-radius 50%
      width 19px
      height 19px
      line-height 19px
      text-align center
      color white
      cursor pointer
  .addBox 
    display flex
    align-items:center
    font-size 14px
    cursor pointer
    .addBtn
      display inline-block
      background #479CF2
      border-radius 50%
      width 19px
      height 19px
      line-height 19px
      text-align center
      color white
      cursor pointer
      transform rotate(45deg)
      margin-right 3px
</style>
<style lang='stylus'>
  #Timeoutnotification
    .el-input__icon
      line-height 0
    .el-tabs__header
      background none
      border none
    .el-tab-pane
      padding-top 15px  
</style>
